<script setup>
import { ref ,onMounted} from 'vue'
import { nurseplanPage } from '@/api/nurselevel'



// 定义分页数据
// 当前页是1
const currentPage = ref(1)
// 每页显示10条数据
const pageSize = ref(10)
const total = ref(0)
// 设置组件的尺寸规格
const size = 'default'
// 是否禁用
const disabled = false

// 清空

const handleReset = () => {

    queryForm.value = {
       id: '',
    lplanId:"",
    sortNo: '',
    fee: '',
    description: '',
    createTime: '',
    updateTime: '',
    createBy: '',
    updateBy: '',
    name: '',
    status: '',
    remark: '' 
    }
   
}

//  <el-table :data="userList" style="width: 100%">
//     <el-table-column prop="id" label="ID" width="180" />
//     <el-table-column prop="LplanId" label="护理计划ID" width="180" />
//     <el-table-column prop="name" label="名称" width="180" />
//         <el-table-column prop="status" label="状态" >
//     <template #default="scope">
//         {{ scope.row.status === 1 ? '启用' : '禁用' }}
//     </template>
//     </el-table-column>
//      <el-table-column prop="fee" label="护理费用" width="180" />
//       <el-table-column prop="description" label="等级说明" width="180" />
//        <el-table-column prop="createTime" label="创建时间" width="180" />
//         <el-table-column prop="updateTime" label="更新时间" width="180" />
//         <el-table-column prop="createBy" label="创建人ID" width="180" />
//         <el-table-column prop="updateBy" label="更新人ID" width="180" />
//     <el-table-column prop="remark" label="备注" width="180" />
//   </el-table>


const queryForm = ref({ 
  
    id: '',
    lplanId:"",
    sortNo: '',
    fee: '',
    description: '',
    createTime: '',
    updateTime: '',
    createBy: '',
    updateBy: '',
    name: '',
    status: '',
    remark: '' 
    
})
const userList = ref([])




const queryUsers = async() => {
    let result = await nurseplanPage(  currentPage.value,
        pageSize.value,
        queryForm.value.lplanId,
        queryForm.value.sortNo,
        queryForm.value.fee,
        queryForm.value.description,
        queryForm.value.createTime,
        queryForm.value.updateTime,
        queryForm.value.createBy,
        queryForm.value.updateBy,
        queryForm.value.name,
        queryForm.value.status,
        queryForm.value.remark  )

    userList.value = result.data.rows
    // 分页数据完善(接口看的)
    total.value = result.data.total
}

// 分页处理
// 参数 val：表示用户切换到的 “当前页码”（例如 2、3 等）。
// 分页每页大小发生改变
const handleSizeChange = (val) => {
    // 从第一页开始
    currentPage.value = 1
    //  (前往第几页的框)每页显示val条数据
    pageSize.value = val
    //   搜索
    queryUsers()



}
// (用户直接点击第几页)当前页发生变化
const handleCurrentChange = (val) => {
    currentPage.value = val
    queryUsers()
}



onMounted(() => {
    queryUsers()
})




</script>







<template>
   <!-- 新增操作按钮行 -->
    <el-form-item>
      
      <el-button type="success" icon="Plus" @click="showDialog">新增</el-button>
      <el-button type="warning" icon="Edit" @click="handleEdit">修改</el-button>
      <el-button type="danger" icon="Delete" @click="handleDelete">删除</el-button>
    </el-form-item>



    <!-- 表格 -->
   <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="lplanId" label="护理计划ID" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="status" label="状态" >
    <template #default="scope">
        {{ scope.row.status === 1 ? '启用' : '禁用' }}
    </template>
    </el-table-column>
     <el-table-column prop="fee" label="护理费用" width="180" />
      <el-table-column prop="description" label="等级说明" width="180" />
       <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column prop="createBy" label="创建人ID" width="180" />
        <el-table-column prop="updateBy" label="更新人ID" width="180" />
    <el-table-column prop="remark" label="备注" width="180" />
  </el-table>


     <!-- 分页展示 -->
     <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />



</template>

<style scoped>

</style>
 